import React from "react";
import src1 from "../../../../res/images/web/euro/欧洲杯@2x.png"
import src2 from "../../../../res/images/web/euro/欧洲杯备份@2x.png"
import Swiper from "../../../../components/Swiper/Swiper";
import {withRouter} from 'react-router-dom'

class IconSwiper extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 0,
            data: [src2, src1, src2, src1],
            offset: 0,
            animate: true,
            start: 0,
            end: 0,
        }
    }

    componentDidMount() {
        this.swipe()
    }

    swipe = () => {
        setTimeout(() => {
            this.setState({
                index: this.state.index + 1,
                animate: true,
            }, () => this.swipe())
        }, 2000)
    }

    onTransitionEnd = () => {
        const index = this.state.index
        const data = [src1, src2,]
        const last = data.length - 1
        if (index === - 1) {
            this.setState({
                animate: false,
                index: last,
            })
        } else if (index === last + 1) {
            this.setState({
                animate: false,
                index: 0,
            })
        }
    }

    render() {
        const curIndex = this.state.index
        const x = 56 * (curIndex + 1) - this.state.offset
        return (
            <div
                style={{
                    position: 'absolute',
                    bottom: '100px',
                    right: 16,
                    width: '56px',
                    height: '56px',
                    zIndex: 100,
                    overflow: 'hidden'
                }}
            >
                <div
                    className='flex'
                    style={{
                        transform: `translateX(-${x}px)`,
                        transition: this.state.animate ? 'all 1s' : '',
                    }}
                    onTransitionEnd={() => this.onTransitionEnd()}
                >
                    {this.state.data.map((src, index) => <img
                        key={index}
                        alt=''
                        src={src}
                        style={{width: '56px', height: '56px'}}
                        onClick={() => {
                            const history = this.props.history
                            const i = this.state.index
                            if (i === 1 || i === 3) {
                                history.push('./invite')
                            } else if (i === 0 || i === 2) {
                                history.push('./euro')
                            }
                        }}
                    />)}
                </div>

                {/*<Swiper*/}
                {/*    data={[src1, src2]}*/}
                {/*/>*/}
            </div>
        )
    }
}

export default withRouter(IconSwiper)